<template>
	<view class="container">
		<!-- "!isempty" -->
		<view class="cart" v-if="!isempty">
			<image src="../../static/img/empty.png" mode="" class="cart_img"></image>
			<view class="cart_text">
				您的购物车空空如也~
			</view>
			<view class="cart_bt" @click="handleToCate">
				<button class="cart_botton" type="default">去加购</button>
			</view>
		</view>

		<uni-swipe-action :style="{height:screenHeight+'px'}" v-else class="swipe-action">
			<block v-for="item in allCart.cart_items" :key="item.product_id" class="swipe">
				<uni-swipe-action-item :right-options="options" @click="deletegoods(item.product_id)">
					<view class="card-actions-item">
						<view class="radio">
							<label>
								<checkbox color="#ff557f" :checked="item.isChecked" @click="radioClick(item)">
								</checkbox>
							</label>
						</view>
						<view class="image" @click="handleToDetail(item.product_id)">
							<image :src="item.product_img" mode=""></image>
						</view>
						<view class="goods_info">
							<text class="goods_name">{{item.product_title}}</text>
							<text>若干枝/扎 可售445扎</text>
							<text>￥{{item.amount}}/扎</text>
							<view class="pick_num">
								<uni-number-box v-model="item.buy_num" @change="bindChange(item.product_id,$event)"
									:min="1" :max="5" background="#f8f9fa">
								</uni-number-box>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</block>
			<!-- <view class="cart_total">
				<view class="checkbox">
					<label @click="checkbox">
						<checkbox color="#ff557f" :checked="AllGoodsState" /><text>全选</text>
					</label>
				</view>
				<view class="price_total">
					合计：<text style="color:#ff557f">￥{{AllTotalPrice}}</text>
				</view>
				<view class="tijiao">
					<button type="default">提交订单</button>
				</view>
			</view> -->
		</uni-swipe-action>
		<view class="cart_total" v-if="isempty">
			<view class="checkbox">
				<label @click="checkbox">
					<checkbox color="#ff557f" :checked="AllGoodsState" /><text>全选</text>
				</label>
			</view>
			<view class="price_total">
				合计：<text style="color:#ff557f">￥{{AllTotalPrice}}</text>
			</view>
			<view class="tijiao" @click="submitOrder">
				<button type="default">提交订单</button>
			</view>
		</view>
		<!-- 合计 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog content="确定删除此商品" title=" " mode="base" message="成功消息" :duration="2000"
				:before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from "vuex";
	import badgeMix from "../../mixin/tabbar-badge.js";
	export default {
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#ff557f',
						fontSize: '44px'
					}
				}],
				screenHeight: 0,
				deleteId: 0
			}
		},
		computed: {
			allCart() {
				return this.$store.state.m_cart.cart1
			},
			isempty() {
				return this.$store.state.m_cart.cart1.cart_items.length && this.$store.state.m_user.token
			},
			...mapGetters('m_cart', ['AllGoodsState', 'AllTotalPrice']),
			...mapState('m_user', ['token'])
		},
		onShow() {
			// this.getallgoods()
		},
		onLoad() {
			this.getscreenHeight()
			this.getallgoods()
		},
		onPullDownRefresh() {
			this.getallgoods()
			// console.log(this.allCart)
		},
		methods: {
			// #ifdef APP
			getscreenHeight() {
				let res = uni.getSystemInfoSync()
				this.screenHeight = res.screenHeight - res.windowTop - res.statusBarHeight - res.windowBottom - 60 - 100
				// console.log(this.screenHeight)
				// console.log(res)
			},
			// #endif
			// #ifdef H5 || MP-WEIXIN
			getscreenHeight() {
				let res = uni.getSystemInfoSync()
				this.screenHeight = res.screenHeight - res.windowTop - res.statusBarHeight - res.windowBottom - 60
				// console.log(res)
			},
			// #endif

			radioClick(item) {
				// item.isChecked = !item.isChecked
				this.$store.commit('m_cart/updateGoodsState', item)
				// console.log(this.allCart)
			},
			getallgoods() {
				uni.$http.get('/product-server/api/cart/v1/mycart').then(res => {
					if (res.data.code === 200) {
						res.data.data.cart_items.forEach(item => {
							item.isChecked = false
						})
						this.$store.commit('m_cart/add', res.data.data)

						uni.stopPullDownRefresh();
					} else {
						let cart = {
							cart_items: []
						}
						this.$store.commit('m_cart/add', cart)
					}

				})
			},
			handleToDetail(id) {
				uni.navigateTo({
					url: `../detail/detail?id=${id}`
				})
			},
			deletegoods(id) {
				this.open()
				// this.confirm(id)
				this.deleteId = id

			},
			checkbox() {
				// console.log(this.AllGoodsState)
				this.$store.commit('m_cart/updateAllGoodsState', !this.AllGoodsState)
			},
			open() {
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			confirm() {
				// let promise = new Promise((resovle, reject) => {
				uni.$http.delete(`/product-server/api/cart/v1/delete/${this.deleteId}`).then(res => {
					if (res.data.code === 200) {
						this.getallgoods()
						this.$refs.popup.close()
					} else {
						uni.$showMsg('删除失败', 1500, 'error')
					}

				})
				// })
			},
			bindChange(id, value) {
				uni.$http.post(`/product-server/api/cart/v1/changeCartItemNum`, {
					"buy_num": value,
					"product_id": id
				}).then(res => {
					this.getallgoods()
				})
				// console.log(id,value)
			},
			// 提交订单
			submitOrder() {
				if (this.AllTotalPrice === 0) {
					uni.$showMsg('亲，还未选择商品！')
				} else {
					this.$store.commit('m_cart/updataPickGoods')
					uni.navigateTo({
						url: '../order/order'
					})
				}

			},
			handleToCate() {
				uni.switchTab({
					url: '../cate/cate'
				})
			}

		}

	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.cart {
		width: 100%;
		height: calc(100vh - 44px - 50px);

		background-color: #FFFFFF;
	}

	.cart_img {
		width: 100%;
		height: 50%;
	}

	.cart_text {
		text-align: center;
		color: #495057;
		font-size: 16rpx;
		letter-spacing: 2rpx;
	}

	.cart_bt {}

	.cart_botton {
		background-color: #ff557f;
		color: #FFFFFF;
		position: fixed;
		width: 80%;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 60rpx;
	}

	.swipe-action {
		/* background-color: #0066CC; */
	}

	.card-actions-item {
		display: flex;
		height: 220rpx;
		border: 1px solid #ccc;
		background-color: #ffffff;
		border-radius: 14rpx;
		margin: 10rpx 10rpx 0 10rpx;
		margin-top: 10rpx;
	}

	.radio {
		width: 100rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		/* background-color: #00CE47; */
	}

	.image {
		/* background-color: #00CE47; */
		padding: 10rpx;
	}

	.card-actions-item image {
		height: 100%;
		width: 220rpx;
		border-radius: 20rpx;
	}

	.goods_info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding-left: 20rpx;
		/* background-color: #8A6DE9; */
		position: relative;
	}

	.goods_name {
		font-size: 40rpx;
		font-weight: 600;
	}

	.pick_num {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.cart_total {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 120rpx;
		background-color: #ffffff;
		display: flex;
		padding-right: 20rpx;
		padding-top: 10rpx;
	}

	.checkbox {
		width: 25%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 58rpx;
		font-size: 36rpx;
	}

	.price_total {
		flex: 1;
		font-size: 36rpx;
		display: flex;
		align-items: center;
	}

	.tijiao {
		height: 100%;
		width: 40%;
		display: flex;
		align-items: center;
		align-items: center;
	}

	.tijiao button {
		width: 100%;
		color: #FFFFFF;
		background-color: rgb(90, 208, 176);
	}
</style>
